<!--
* @author dumeng
课程列表
-->
<template>
  <div class="app-container course-container">
    <el-collapse-transition>
      <div v-show="searchshow" class="course-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search" />
        </span>
        <el-input v-model="listQuery.courseName" placeholder="请输入课程名称" class="search-input" @keyup.enter.native="handleFilter" />
        <div class="course-search-btn">
          <el-button class="filter-item" type="primary" @click="handleFilter">搜索</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
          <span class="course-search-more" @click="searchshow = !searchshow">
            更多筛选条件
            <i class="el-icon-arrow-down" />
          </span>
        </div>
      </div>
    </el-collapse-transition>
    <el-collapse-transition>
      <div v-show="!searchshow" class="course-search separate">
        <div class="course-search-inner">
          <el-row type="flex">
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">课程名称</div>
                <el-input v-model.trim="search.courseName" style="width: 80%;" class="filter-item" placeholder="请输入课程名称搜索" />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">课程分类</div>
                <el-cascader
                  ref="classify"
                  v-model="search.courseClassify"
                  style="width:80%"
                  clearable
                  :props="classifyProps"
                  :options="classifyOptions"
                />
              </div>
            </el-col>
            <el-col :span="8">
              <div class="search-inner-item">
                <div class="item-label">课程所属</div>
                <el-select v-model="search.courseBelong" placeholder="" style="width:80%">
                  <el-option label="全部" value="2" />
                  <el-option label="平台" value="0" />
                  <el-option label="自有" value="1" />
                </el-select>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="course-search-btn">
          <el-button type="primary" @click="handleFilter">搜索</el-button>
          <el-button class="filter-item" type="primary" @click="resettingBtn">重置</el-button>
          <span class="course-search-more" @click="searchshow = !searchshow">
            精简筛选条件
            <i class="el-icon-arrow-up" />
          </span>
        </div>
      </div>
    </el-collapse-transition>
    <div class="course-btn">
      <div class="btn-title">
        <span>音频课程管理</span>
      </div>
      <div class="btn-btns">
        <el-button
          style="margin-left: 10px"
          @click="classificationDialog = true"
          >批量设置</el-button
        >
        <el-button style="margin-left: 10px;" @click="classifyDialogVisible = true">特殊标签管理 </el-button>
        <el-button style="margin-left: 10px;" @click="handleSelectPlatform">选取SaaS平台课程 </el-button>
        <el-button style="margin-left: 10px;" @click="handleCreate">新建课程 </el-button>
      </div>
    </div>
    <div class="classify-tab">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane v-for="(item, n) in statusOptionsList" :key="n" :label="item.statusName" :name="item.id" />
      </el-tabs>
    </div>
    <div class="course-list">
      <v-table ref="tabs" :list="courseList" tag="courseManagement" :list-loading="listLoading" :filter-column="filtercolumn" :source-arr="sourceArr" @handleSelectionChange="handleSelectionChange">
        <el-table-column fixed="right" label="操作" width="160" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
            <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <!-- <el-button v-if="scope.row.courseBelong === '1'" type="text" size="small" @click="handleChapter(scope.row)">章节</el-button> -->
            <el-button v-if="scope.row.courseBelong === '1'" type="text" size="small" @click="handleCourseware(scope.row)">课件</el-button>
            <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small" @click="handleStatus(scope.row)">
              {{ scope.row.status == 'KCZT02' ? '上架' : '下架' }}
            </el-button>
            <el-button v-if="scope.row.isForce !== 'SF01'" type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
            <el-button type="text" size="small" @click="handleAddress(scope.row.id)">查看地址</el-button>
            <el-button
              v-if="scope.row.isForce === 'SF01'"
              type="text"
              size="mini"
              @click="handleSort(scope.row)"
              >修改排序</el-button
            >
          </template>
        </el-table-column>
      </v-table>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <!-- <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="preview.state" title="查看" center width="600px">
      <courseware-preview :type="preview.fileType" :file-id="preview.fileId" />
    </el-dialog> -->
    <courseware-list v-if="coursewareVisible" :course-id="selectCourse" :course-classify="courseClassify" @close="handleClose" />
    <el-dialog v-el-drag-dialog :close-on-click-modal="false" :visible.sync="classifyDialogVisible" title="特殊标签管理" center width="700px">
      <classify v-if="classifyDialogVisible" v-model="tags" :parentref="true" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="classifyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSettingTags">保 存</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="viewShow" v-el-drag-dialog :close-on-click-modal="false" :visible.sync="viewShow" title="查看" center width="800px">
      <el-tabs>
        <el-tab-pane label="课程基本信息">
          <el-row class="see-dialog">
            <el-col
              :span="24"
              class="view-item"
            >课程封面：
              <el-image
                style="width: 100px; height: auto;display: inline-block;vertical-align: top;"
                :src="coursewareInfo.courseImgUrl"
                :preview-src-list="[coursewareInfo.courseImgUrl]"
              />
            </el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程名称：<span class="view-content">{{ coursewareInfo.courseName }}</span>
            </el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程分类：<span class="view-content">{{ coursewareInfo.courseClassifyValue || '' }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程来源：<span class="view-content">{{ coursewareInfo.courseSource || '' }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >关键词：<span class="view-content">{{ coursewareInfo.courseKeyword || '' }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >标签：
              <span class="view-content">
                {{ coursewareInfo.courseLabel }}
              </span>
            </el-col>
            <el-col :span="24">
              简介：<br><br>
              <div class="textarea-view">{{ coursewareInfo.courseIntroduce }}</div>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="课件信息">
          <el-row class="see-dialog">
            <el-col :span="24">
              <el-table height="450" :data="coursewareInfo.subjectList">
                <el-table-column prop="subject.subjectImgUrl" label="课件封面" width="120">
                  <template slot-scope="scope">
                    <el-image
                      :preview-src-list="[scope.row.subject.subjectImgUrl]"
                      style="width: 100%;height:auto;"
                      :src="scope.row.subject.subjectImgUrl"
                    />
                  </template>
                </el-table-column>
                <el-table-column label="课件名称" prop="subject.subjectName" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.subject.subjectName }}
                  </template>
                </el-table-column>
                <el-table-column label="课件分类" prop="subject.subjectIntroduce" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.subject.subjectClassifyIdsValue }}
                  </template>
                </el-table-column>
                <el-table-column label="简介" width="260" prop="subject.subjectIntroduce" show-overflow-tooltip>
                  <template slot-scope="scope">
                    {{ scope.row.subject.subjectIntroduce }}
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handlePreview(scope.row, 'after')">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="链接信息">
          <el-row class="see-dialog">
            <el-col
              :span="24"
              class="view-item"
            >课程ID：<span class="view-content">{{ coursewareInfo.id }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程分类ID：<span class="view-content">{{ coursewareInfo.courseClassify }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程封面OSS地址：<span class="view-content">{{ coursewareInfo.courseImgUrl }}</span></el-col>
            <el-col
              :span="24"
              class="view-item"
            >课程封面ID：<span class="view-content">{{ coursewareInfo.courseImg }}</span></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <section slot="footer" class="dialog-footer">
        <el-button style="padding: 10px 30px;" @click="viewShow = false">关 闭</el-button>
      </section>
    </el-dialog>
    <el-dialog
      v-if="preview.state"
      v-el-drag-dialog
      :visible.sync="preview.state"
      :close-on-click-modal="false"
      title="查看"
      center
      width="600px"
      :fullscreen="isFull"
      @close="preview.stat = false"
    >
      <span slot="title" class="my-title">
        <span>查看</span>
        <div v-if="preview.fileType === 'KCLX02'" class="full">
          <el-button size="small" type="primary" icon="el-icon-full-screen" @click="isFull = !isFull">{{ isFull ? '取消全屏' : '全屏' }}</el-button>
        </div>
      </span>
      <div>
        <courseware-preview v-if="preview.state" :is-full="isFull" :type="preview.fileType" show-type="after" :file-id="preview.fileId" />
      </div>
    </el-dialog>
    <el-dialog
        title="修改排序"
        width="30%"
        :visible.sync="sortDialog"
        @close="cancelDialog"
        v-el-drag-dialog
      >
        <el-input
          v-model="form.sort"
          placeholder="请输入排序值"
          type="number"
        ></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button style="padding: 8px 30px;" @click="cancelDialog">取 消</el-button>
          <el-button style="padding: 8px 30px;" type="primary" @click="handelUpdateSort">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 批量设置分类 -->
    <el-dialog
      title="设置分类"
      width="30%"
      :visible.sync="classificationDialog"
      @close="cancelClassificationDialog"
      v-el-drag-dialog
    >
      <el-cascader
        ref="classify"
        v-model="curriculumClassify"
        style="width: 100%"
        clearable
        :props="classifyProps"
        :options="classifyOptions"
      />
      <span slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px" @click="cancelClassificationDialog"
          >取 消</el-button
        >
        <el-button
          style="padding: 8px 30px"
          type="primary"
          @click="handelClassification"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { deleteCourse, getClassifyTree, getCourseTag, queryCoursePage, queryList, rackUpAndDown, setTags, batchClassification} from '../api/index'
import {
  update
} from '../api/create'
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import permission from '@/directive/permission/index.js' // 权限判断指令
import CoursewarePreview from '../components/CoursewarePreview'
import CoursewareList from '../components/audioCoursewareLists/index'
import Classify from '../components/Classify'
import vTable from '@/components/Table'
export default {
  name: 'CourseAudioIndex',
  components: { Pagination, CoursewarePreview, CoursewareList, Classify, vTable },
  directives: { elDragDialog, permission },
  data() {
    return {
      classificationDialog: false,
      isFull: false, // 是否全屏
      listLoading: false,
      list: null,
      total: 0,
      searchshow: true,
      search: {
        courseName: '',
        courseClassify: '',
        courseSource: '',
        courseKeyword: '',
        courseBelong: '2'
      },
      classifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true
      },
      classifyOptions: [],
      classifyDialogVisible: false,
      listQuery: {
        page: 1,
        limit: 10,
        courseName: ''
      },
      checkList: [],
      courseList: [],
      multipleSelection: [],
      curriculumClassify: [],
      // view: '/API-DOCUMENT/document/file/download?id=',
      view: '',
      preview: {
        fileId: '',
        fileType: '',
        showType: 'after',
        state: false
      },
      activeTab: '1',
      statusOptions: [
        {
          statusName: '全部',
          id: '1'
        },
        {
          statusName: '已上架',
          id: 'KCZT01'
        },
        {
          statusName: '未上架',
          id: 'KCZT02'
        }
      ],
      selectCourse: '', // 当前点击的课程
      coursewareVisible: false,
      courseClassify: '',
      tags: '',
      tagList: [],
      statusOptionsList: [],
      viewShow: false,
      coursewareInfo: { subjectList: [] },
      visible4Select: false, // 从平台端选择课程弹窗
      sourceArr: ['courseImgUrl'],
      link: '/audioHalfScreen?i=',      
      form: {
        id: '',
        sort: ''
      },
      sortDialog: false
    }
  },
  computed: {
    ...mapGetters(['sidebar'])
  },
  created() {
    this.getClassifyOption()
    this.getList()
    this.setTagList()
  } /*  activated() {    this.getList()  },*/,
  methods: {
    /**
     *多选
     */
     handleSelectionChange(arr) {
      this.multipleSelection = arr
    },
    // 关闭设置分类弹框
    cancelClassificationDialog() {
      this.classificationDialog = false
      this.curriculumClassify = []
    },

    // 提交设置的课程分类
    handelClassification() {
      if (this.multipleSelection.length > 0) {
        const loading = this.$loading({
          lock: true,
          text: '请稍后',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.3)'
        })
        const params = {
          id: this.multipleSelection.map(item => {
            return item.id
          }).join(','),
          courseClassify: this.curriculumClassify[this.curriculumClassify.length - 1]
        }
        batchClassification(params).then(res => {
          loading.close()
          console.log(res, 935);
          if(res.data.code === '200') {
            this.$message({
              message: '修改成功',
              type: 'success'
            })
            this.cancelClassificationDialog()
            this.getList()
            this.$refs.tabs.handleChangeSelection(this.multipleSelection)
          }
        }).catch(() => {
          loading.close()
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择需要修改的音频'
        })
      }
    },
    rowClass({ row, rowIndex }) {
      return {
        padding: '5px 0',
        height: '20px',
        background: '#f1f1f1'
      }
    },
    /**
     * 查看前端地址
     */
    handleAddress(id) {
      this.$confirm(`链接地址为：${this.link}${id}&viewType=warmtransceiver<span style="color:red">注意：该链接只对已发布数据有效</span>`, '提示', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '复制链接',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const input = document.createElement('input')
          input.setAttribute('readonly', 'readonly')
          input.setAttribute('value', this.link + id + '&viewType=warmtransceiver')
          document.body.appendChild(input)
          input.select()
          if (document.execCommand('copy')) {
            document.execCommand('copy')
            this.$message({
              title: '成功',
              message: '复制成功！',
              type: 'success',
              duration: 1500
            })
          }
          document.body.removeChild(input)
        })
        .catch(() => {})
    },
    /**
     * 选项卡切换
     */
    handleTabClick(tab, event) {
      this.listQuery.page = 1
      this.getList()
    },
    setTagList() {
      getCourseTag().then((res) => {
        this.tagList = []
        const tagList = res.data.data.configValue && res.data.data.configValue.split(',')
        for (const i of tagList) {
          this.tagList.push({
            statusName: i,
            id: 'tag_' + i
          })
        }
        this.statusOptionsList = [...this.statusOptions, ...this.tagList]
        this.getList()
      })
    },
    handlePreview(i, t) {
      this.preview.fileId = i.subject.courseIdUrl
      this.preview.fileType = i.subject.subjectType
      this.preview.state = true
    },
    handleStatus(row) {
      const state = row.status === 'KCZT01' ? 'KCZT02' : 'KCZT01'
      let msg = ''
      if (row.status === 'KCZT01') {
        msg = '下架'
      } else {
        msg = '上架'
      }
      if (row.subjectNum < 1 && msg === '上架') {
        return this.$message({ type: 'warning', message: '该课程尚无课件,请添加课件后再上架！' })
      }
      this.$confirm('确定' + msg + '该课程吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            rackUpAndDown({ id: row.id, status: state })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: msg + '成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {})
    },
    /**
     * 获取课程分类
     */
    getClassifyOption() {
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: 'JNZQFL08', status: 'ZT01' })
          .then(({ data }) => {
            this.classifyOptions = data.data || []
          })
          .catch((error) => {
            reject(error)
          })
      })
    },
    getList(obj) {
      this.listLoading = true
      var query = {
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit,
        courseType: 'KCLX03',
        status: this.activeTab === '1' || this.activeTab.startsWith('tag_') ? '' : this.activeTab
      }
      if (this.activeTab.startsWith('tag_')) {
        query['courseLabel'] = this.activeTab.split('_')[1]
      }
      if (this.searchshow) {
        query['courseName'] = this.listQuery.courseName
      } else {
        query['courseName'] = this.search.courseName
        query['courseClassify'] = this.search.courseClassify.length > 0 ? this.search.courseClassify[this.search.courseClassify.length - 1] : ''
        query['courseSource'] = this.search.courseSource
        query['courseBelong'] = this.search.courseBelong
      }
      return new Promise((resolve, reject) => {
        queryCoursePage(query)
          .then((response) => {
            this.courseList = response.data.data.rows
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch((error) => {
            this.listLoading = false
            reject(error)
          })
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      this.listQuery.courseName = ''
      for (const i in this.search) {
        if (i === 'courseBelong') {
          this.search['courseBelong'] = '2'
        } else {
          this.search['' + i + ''] = ''
        }
      }

      this.listQuery.page = 1
      this.getList()
    },
    handleCreate() {
      this.$router.push({
        path: '/skill/course/audioCreate',
        query: {
          activeTab: this.activeTab
        }
      })
    },
    handleSelectPlatform() {
      this.$router.push({
        path: '/skill/course/SelectaudioCourse4platform',
        query: {
          activeTab: this.activeTab
        }
      })
    },
    handleEdit(item) {
      this.$router.push({ path: '/skill/course/audioCreate', query: { i: item.id, type: 'u', activeTab: this.activeTab }})
    },
    handleChapter(item) {
      this.$router.push({ path: '/skill/course/audioChapter', query: { id: item.id }})
    },
    handleCourseware(item) {
      this.selectCourse = item.id
      this.courseClassify = item.courseClassify
      this.coursewareVisible = true
    },
    handleDel(row) {
      if (row.status === 'KCZT01') {
        this.$message({
          message: '课程已发布，无法删除',
          type: 'warning'
        })
      } else {
        this.deleteCourse(row.id)
      }
    },
    deleteCourse(ids) {
      this.$confirm('此操作将永久删除该课程, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          return new Promise((resolve, reject) => {
            deleteCourse({ id: ids })
              .then(() => {
                loading.close()
                this.$message({
                  title: '成功',
                  message: '删除成功',
                  type: 'success',
                  duration: 2000
                })
                this.getList()
              })
              .catch((error) => {
                loading.close()
                reject(error)
              })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handleSettingTags() {
      const tags = Array.from(new Set(this.tags.split(',').map((i) => i.trim()))).join(',')
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      setTags({ tags })
        .then((res) => {
          loading.close()
          this.$message({ type: 'success', message: '操作成功' })
          this.classifyDialogVisible = false
          this.setTagList()
        })
        .catch(() => {
          loading.close()
        })
    },
    handleClose() {
      this.coursewareVisible = false
      this.getList()
    },
    handleView(row) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      this.coursewareInfo = row
      queryList({ courseId: row.id })
        .then((res) => {
          this.coursewareInfo.subjectList = res.data.data.data || []
          this.$nextTick(() => {
            loading.close()
            this.viewShow = true
          })
        })
        .catch(() => {
          loading.close()
        })
    },
    handleSubjectView() {},
    filtercolumn(scope, item) {
      if (item === 'subjectNum') {
        return `${scope.row.subjectNum || '0'}`
      } else if (item === 'isRecommend') {
        return `${scope.row.isRecommend === '1' ? '是' : '否'} / ${scope.row.isDiscuss === 1 ? '是' : '否'}`
      } else {
        return scope.row[item]
      }
    },
    handleClose4() {
      this.getList()
      this.visible4Select = false
    },

    // 修改排序
    handelUpdateSort() {
      if (this.form.sort === '') {
        this.$message({
          message: '请输入排序值',
          type: 'warning'
        })
        return
      }
      const obj = Object.assign({}, this.form)
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      update(obj).then(res => {
        if(res.data.code === '200') {
          loading.close()
          this.sortDialog = false
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        } else {
          loading.close()
          this.$message({
            message: '修改失败',
            type: 'error'
          })
        }
      }).catch(() => {
        loading.close()
      })
    },

    // 强制下发数组修改排序
    handleSort(row) {
      console.log(row, '482');
      this.form.id = row.id
      this.sortDialog = true
    },

    // 取消修改排序
    cancelDialog() {
      this.sortDialog = false
      for (let k in this.form) {
        this.form[k] = ''
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
$dark_gray: #bfced6;
.course-container {
  .course-search {
    background-color: #fff;
    padding: 0 20px;

    .svg-container {
      padding: 0 5px 0 10px;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;

      &_login {
        font-size: 20px;
      }
    }

    .search-input {
      width: 60%;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }

      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;

        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }

    .course-search-btn {
      display: inline-block;
      float: right;

      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }

      .course-search-more {
        font-size: 14px;
        font-weight: 500;
        @include font-color($mainColor);
        cursor: pointer;
      }
    }

    &.merge {
      height: 50px;
      line-height: 50px;
    }

    &.separate {
      .course-search-inner {
        padding-top: 10px;

        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }

          .el-input {
            position: relative;

            .el-input__inner {
              border: none;
              padding: 0;
            }

            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }

      .course-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }

  .course-classify {
    display: flex;
    background-color: #fff;
    margin-top: 10px;
    margin-bottom: 10px;

    .course-classify-inner {
      flex: 1;

      .inner-item {
        position: relative;

        ul {
          padding: 5px 20px;
          margin: 0;
          box-shadow: 0 5px 10px rgba(254, 90, 97, 0.05);
          max-height: 50px;
          transition: all 1s ease;
          overflow: hidden;

          li {
            list-style-type: none;
            display: inline-block;
            padding: 6px 12px;
            font-size: 14px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            margin: 5px;
            cursor: pointer;

            &:first-child {
              margin: 0;
              padding: 0;
              color: #a6a6a6;
            }

            &.active {
              color: $mainColor;
              background: #eaf7ff;
              border-radius: 17px;
            }
          }

          &.toggle {
            max-height: 300px;
          }
        }

        span {
          position: absolute;
          right: 10px;
          top: 12px;
          color: $mainColor;
          cursor: pointer;
          font-size: 20px;
        }
      }
    }

    .course-classify-btn {
      position: relative;
      width: 150px;

      .el-button {
        position: absolute;
        top: 50%;
        margin-top: -15px;
        left: 50%;
        margin-left: -49px;
      }
    }
  }

  .course-btn {
    display: flex;
    height: 46px;
    line-height: 46px;
    width: 100%;

    .btn-title {
      flex: 1;
      font-size: 16px;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
    }
  }

  .course-list {
    .el-image {
      width: 100%;
      height: auto;
      max-height: 140px;
    }
  }

  .pagination-container {
    background: none;
  }

  .classify-tab {
    width: 100%;
    margin: 10px 0;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 4px;

    .el-tabs__nav-next {
      line-height: 40px;
    }

    .el-tabs__nav-wrap::after {
      display: none;
    }

    .el-tabs__header {
      margin: 0;
    }
  }

  .view-item {
    margin-bottom: 10px;

    .view-content {
      color: #333;
      font-weight: 500;
    }
  }

  .see-dialog {
    height: 460px;
    overflow-y: auto;
    .textarea-view {
      white-space: pre-line;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
      padding: 10px;
      color: #333;
      background-color: #f9f9f9;
      font-weight: normal;
    }
  }

  .my-title {
    width: 100%;
    display: inline-block;
    font-size: 16px !important;
    font-family: PingFangSC-Medium !important;
    font-weight: 700 !important;
    color: #333333 !important;
    position: relative;
    .full {
      position: absolute;
      width: 100px;
      height: 58px;
      right: 50px;
      top: -18px;
      display: flex;
      align-items: center;
      text-align: right;
    }
  }
}
.el-message-box__status+.el-message-box__message{
  padding-left: 30px;
}
.el-message-box__message p{
  width: 370px;
}
.el-message-box{
  width: 435px;
}
</style>
